<template>

	<view class="item-bg">
		<view class="f-tabs">
			<view :class="state == 0?'active':''" @click="state=0">海报</view>
			<view :class="state == 1?'active':''" @click="state=1">桌贴</view>
		</view>
		
		<view class="canvas-posion">
			<canvas canvas-id="qrcode" id="qrcode" :style="{'width': `${size}px`, 'height': `${qrHight}px`}" />
		</view>
		<view class="item_border" v-show="state==0">
			<view class="tip-canvas" v-show="!codePic">
				绘制中...
			</view>
			<image :src="codePic" v-show="codePic" @click="canstopic()" mode="widthFix" style="width: 100%;"></image>
		</view>


		<view class="canvas-posion">
			<canvas v-show="showCanvas" id="qrcode2" canvas-id="qrcode2"
				:style="{'width': `${size}px`, 'height': `${qrHight}px`}" />
		</view>
		<view class="item_border" v-show="state==1">
			<view class="number-pick">
				<view class="name">
					桌号选择
				</view>
				<uni-data-picker v-model="numberValue" :localdata="numberRange" popup-title="桌号"
					@change="generateQrcodeNumber" @popupopened="showCanvas=false" @popupclosed="showCanvas=true">
					<view class="picker">
						{{numberValue[0]}} ~ {{numberValue[3]}}
					</view>
				</uni-data-picker>
			</view>
			<view class="tip-canvas" v-show="!codePic2">
				绘制中...
			</view>
			<image :src="codePic2" v-show="codePic2" @click="canstopic()" mode="widthFix" style="width: 100%;"></image>


		</view>

		<view class="eidt-button">
			<button type="primary" @click="saveShareImg">保存{{state?'桌贴':'海报'}}到相册</button>
		</view>

	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
	export default {
		data() {
			return {
				size: 414,
				qrHight: 583.41, //海报背景高度
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				busId: null,
				state: 0,
				numberRange: [],
				numberValue: [1, 2, 3, 4],
				bgPath: null,
				numPath: null,
				showCanvas: true,
				codePic: null,
				codePic2: null
			}
		},
		onLoad(e) {
			this.busId = e.id;
			for (let i = 1; i < 97; i = i + 4) {
				this.numberRange.push({
					value: [i, i + 1, i + 2, i + 3],
					text: i + " ~ " + (i + 3),
				})
			}
		},
		onReady() {
			uni.downloadFile({
				url: "https://zaihuayi.top/picture/static/ordercodebg.png",
				success: (res) => {
					this.bgPath = res.tempFilePath;
					this.generateQrcode();
				}
			})

			uni.downloadFile({
				url: "https://zaihuayi.top/picture/static/ordernumberbg.png",
				success: (res) => {
					this.numPath = res.tempFilePath;
					this.generateQrcodeNumber();
				}
			})
		},
		methods: {
			generateQrcodeNumber() {
				let ctx = uni.createCanvasContext('qrcode2', this)
				ctx.drawImage(
					this.numPath,
					0,
					0,
					this.size,
					this.qrHight,
				);
				this.numberValue.map((item, index) => {
					let _text = item;
					if (item < 10) {
						_text = "0" + item
					}
					let str = "https://zaihuayi.top/orderCode?id=" + this.busId + "&number=" + _text
					let modules = uQRCode.getModules({
						text: str,
						errorCorrectLevel: uQRCode.errorCorrectLevel.H
					})

					let size = 70;
					let margin = 5;
					let xdev = 167;
					let ydev = 71 + index * 122;

					let tileSize = (size - 5 * 2) / modules.length


					ctx.setFillStyle(this.backgroundColor)
					ctx.fillRect(xdev, ydev, size, size)
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize + margin + xdev
							var y = row * tileSize + margin + ydev
							var w = tileSize
							var h = tileSize

							var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}

					ctx.setFontSize(50);
					ctx.setFillStyle("#1aa83f");
					ctx.fillText(_text, 58, ydev + 71, size);
				})

				ctx.draw();
				setTimeout(() => {
					wx.canvasToTempFilePath({
						canvasId: "qrcode2",
						success: (res) => {
							this.codePic2 = res.tempFilePath;
						}
					})
				}, 500)
			},
			//点击保存到相册
			saveShareImg() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.state ? this.codePic2 : this.codePic,
					success(sres) {},
					fail: function(sres) {},
					complete(scom) {}
				})
			},
			generateQrcode() {
				let modules = uQRCode.getModules({
					text: 'https://zaihuayi.top/orderCode?id=' + this.busId,
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				})

				let size = 130;
				let margin = 5;
				let xdev = 143;
				let ydev = 317;

				let tileSize = (size - 5 * 2) / modules.length
				// 获取绘图所需的上下文
				let ctx = uni.createCanvasContext('qrcode', this)
				// 开始绘制
				ctx.drawImage(
					this.bgPath,
					0,
					0,
					this.size,
					this.qrHight,
				);

				ctx.setFillStyle(this.backgroundColor)
				ctx.fillRect(xdev, ydev, size, size)
				for (var row = 0; row < modules.length; row++) {
					for (var col = 0; col < modules.length; col++) {
						// 计算每一个小块的位置
						var x = col * tileSize + margin + xdev
						var y = row * tileSize + margin + ydev
						var w = tileSize
						var h = tileSize

						var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
						ctx.setFillStyle(style)
						ctx.fillRect(x, y, w, h)
					}
				}
				ctx.draw();

				setTimeout(() => {
					wx.canvasToTempFilePath({
						canvasId: "qrcode",
						success: (res) => {
							this.codePic = res.tempFilePath;
						}
					})
				}, 500)
			},
			canstopic() {
				wx.previewImage({
					urls: [this.state ? this.codePic2 : this.codePic, ] // 需要预览的图片http链接列表
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.canvas-posion {
		position: absolute;
		top: -1000px;
	}

	.tip-canvas {
		width: 414px;
		text-align: center;
		height: 583.41px;
		line-height: 583.41px;
	}

	.number-pick {
		display: flex;
		align-items: center;
		margin: 10px;
		color: #666;
		background: #fff;
		line-height: 35px;
		border-radius: 5px;
		padding: 10px;

		.name {
			width: 100px;
			line-height: 35px;
		}

		.picker {
			border-bottom: 1px solid #e5e5e5;
			width: 200px;
			line-height: 35px;
		}
	}

	.eidt-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;

		button {
			margin: 10px;
		}
	}

	.item_border {}

	.title {
		margin: 15px 0;
		color: #000;
		text-align: center;
	}

	.item-bg {
		background-color: #f2f3f8;
		min-height: 100vh;
		padding-bottom: 80px;
	}
</style>
